<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>直播列表</title>
    <meta charset="UTF-8">
    <link href="css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link href="css/style.css" rel="stylesheet" th:href="@{/css/style.css}">
    <link href="css/video.css" rel="stylesheet" th:href="@{/css/video.css}">
    <link href="css/zhibo.css" rel="stylesheet" th:href="@{/css/zhibo.css}">
    <link href="css/user-left.css" rel="stylesheet" th:href="@{/css/user-left.css}">
    <link href="css/user-right.css" rel="stylesheet" th:href="@{/css/user-right.css}">
</head>
<body>

<!--导航栏-->
<div th:replace="header::header"></div>
<!--导航栏-->
<div class="container userPage">
    <div class="row">
        <div class="col-3" id="left-info">
            <div th:replace="user-teacher-sidebar::sidebar">
            </div>
        </div>
        <div class="col-9" id="right-info">
            <div class="tab-content">
                <div class="tab-pane fade active show" id="message-content">
                    <div class="container" id="myZhibo">
                        <div class="infoVideo align-items-center" style="height: 580px;margin-bottom: 2%;"
                             th:each="liveVM:${liveVMList}">
                            <div class="name" style="padding-top: 2%;">
                                <strong th:text="${liveVM.name}">Div+CSS布局</strong>
                            </div>
                            <div></div>
                            <br/>
                            <p>
                                课程：<span class="class-category" th:text="${liveVM.course.name}">网页制作</span>
                            </p>
                            <p>
                                专业：<span th:text="${liveVM.major.name}">软件工程</span>
                            </p>
                            <p>
                                年级：<span th:text="${liveVM.grade}">2016</span>
                            </p>
                            <p>
                                直播日期：<span th:text="${#dates.format(liveVM.date, 'yyyy-MM-dd')}">2016/6/6</span>
                            </p>
                            <p>
                                开始时间：<span th:text="${liveVM.startTime}">19:00-20:00</span>
                            </p>
                            <p>
                                直播长度：<span th:text="${liveVM.length}">60 分钟</span>
                            </p>
                            <p>
                                推流地址：<span th:text="${liveVM.pushUrl}">rtmp://127.0.0.1/live/2</span>
                            </p>
                            <p>
                                推流密钥：<span th:text="${liveVM.id}">7a20dc3a-b3fd-4ef1-95b5-89ad44dd6c6c</span>
                            </p>
                            <p th:if="${liveVM.liveMaterial}">
                                直播资料：<a class="btn" th:href="@{/live/material/}+${liveVM.liveMaterial.id}">下载</a>
                            </p>
                            <form method="post" style="float: right; margin-right: 50px;"
                                  th:action="@{/live/}+${liveVM.id}">
                                <input hidden name="_method" value="delete"/>
                                <button class="btn btn-danger" type="submit">结束直播</button>
                                <a class=" btn ml-auto " href="#"
                                   th:href="@{/live/}+${liveVM.teacher.id}+@{/}+${liveVM.id}">进入直播</a>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>